<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的购物车</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/public.css">
    <style>
        html,
        body {
            user-select: none;
        }

        img {
            width: 30px;
        }

        dl {
            width: 1190px;
            height: 160px;
            margin: 10px auto;
            /* border: solid 1px #999; */
            background: #FFF4E8;
        }

        .mune {
            width: 1190px;
            height: 90px;
            margin: 10px auto;
        }

        .mune span {
            float: right;
        }

        .empty {
            width: 94px;
            height: 52px;
            background: #E64347;
            font-size: 18;
            font-weight: bold;
            text-align: center;
            line-height: 52px;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="header">
        <div class="fl">
            <a href="../html/index.html"><img src="../img/logo.png" alt="" style="width: 170px;height: 70px;"></a>
        </div>
        <h1>京东超市</h1>
        <div class="fr">
            <span class="fa fa-commenting-o"></span>
            <a href="#">
                <p>登录页面，调查问卷</p>
            </a>
        </div>
    </div>
    <div id="cartList">

    </div>
    <div class="mune">
        <input type="checkbox" class="selectAll">全选
        <p>总价:<span class="toltalNum"></span></p>
        <span class="empty">清空购物车</span>
    </div>

    <div class="footer">
        <ul>
            <li><a href="#">关于我们</a>|</li>
            <li><a href="#">联系我们</a>|</li>
            <li><a href="#">人才招聘</a>|</li>
            <li><a href="#">商家入驻</a>|</li>
            <li><a href="#">广告服务</a>|</li>
            <li><a href="#">手机京东</a>|</li>
            <li><a href="#">友情链接</a>|</li>
            <li><a href="#">销售联盟</a>|</li>
            <li><a href="#">京东社区</a>|</li>
            <li><a href="#">京东公益</a>|</li>
            <li><a href="#">English Site</a></li>
        </ul><br>
        <p>Copyright © 2004-2020 京东JD.com 版权所有</p>
    </div>
    <!-- <script src="../js/cart.js"></script> -->
    <script src="../js/jquery-1.11.0.js"></script>
    <script>
        //获取购物车数据

        $.get("http://jx.xuzhixiang.top/ap/api/cart-list.php", {
            id: 65646
        }, data => {
            console.log(data)
            let str = "";
            for (let i = 0; i < data.data.length; i++) {
                str += `
                    
            <dl class="orderList">
                单选<input type="checkbox" class="selectOne">
                <dt><img src="${data.data[i].pimg}" alt=""></dt>
                <dd>${data.data[i].pname}</dd>
                <p class="money">${data.data[i].pprice}</p>
                数量:<span class="min" data-id=${data.data.pid}>&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;</span>
                <input type="text" value="${data.data[i].pnum}" class="con">
                <span class="pull" data-id=${data.data.pid}>&nbsp;&nbsp;&nbsp;+&nbsp;&nbsp;&nbsp;</span>
                <span class="and">小计:${data.data[i].pprice}</span>
                <span class="del">删除</span>
                </dl>
            
                    `
                checkAll();

                allNum();


            }
            $("#cartList").html(str);



            for (let i = 0; i < data.data.length; i++) {
                //删除
                $(".del").eq(i).click(function () {
                    $.get("http://jx.xuzhixiang.top/ap/api/cart-delete.php", {
                        uid: 65646,
                        pid: data.data[i].pid
                    }, data => {
                        console.log(data)
                    })
                    $(this).parent().remove()
                    andNum();
                    //商品为空，全选按钮
                    if ($(".orderList").length === 0) {
                        $(".selectAll").prop("checked", false)
                    }
                    let flag = true;
                    $('.selectOne').each(function (i, val) {
                        console.log(val.checked);
                        if (val.checked === false) {
                            flag = false;
                        }
                    });
                    allNum();
                    $(".selectAll").prop('checked', flag);
                });
                //清空
                $(".empty").click(function () {
                    $.get("http://jx.xuzhixiang.top/ap/api/cart-delete.php", {
                        uid: 65646,
                        pid: data.data[i].pid
                    }, data => {
                        console.log(data)
                    })
                    $(".orderList").remove()
                    andNum();
                });
            }

            // 加减商品数量
            $(".min").on("click", function () {
                let val = +$(this).next().val()
                val--;
                if (val == 0) {
                    val = 1;
                }
                $(this).next().val(val)
                $.get("http://jx.xuzhixiang.top/ap/api/cart-update-num.php", {
                    uid: 65646,
                    pid: $(this).attr('data-id'),
                    pnum: val
                }, data => {
                    console.log(data);
                })
                andNum();
                allNum();
            })
            $(".pull").on("click", function () {
                let val = +$(this).prev().val()
                val++;
                $(this).prev().val(val)
                console.log(val)
                $.get("http://jx.xuzhixiang.top/ap/api/cart-update-num.php", {
                    uid: 65646,
                    pid: $(this).attr('data-id'),
                    pnum: val
                }, data => {
                    console.log(data);
                })
                andNum();
                allNum();
            })

            //商品小计
            function andNum() {
                let count = 0;
                $(".con").each(function (i, val) {
                    let num = parseInt(val.value);
                    let price = parseFloat($(".money").eq(i).text());
                    count = num * price;
                    $(".and").eq(i).html(`￥${count}`)
                })

            }
            // andNum();

            // 商品总价
            function allNum() {
                let count = 0;
                $(".con").each(function (i, val) {
                    if ($(this).parent().find(".selectOne").prop("checked")) {
                        let num = parseInt(val.value);
                        let price = parseFloat($(".money").eq(i).text());
                        // if($(".selectOne").eq(i).prop("checked")){
                        for (let i = 0; i < $(".con").length; i++) {
                            count += num * price;
                        }
                    }



                    // }
                })
                $(".toltalNum").html("￥" + count)
            }

            //全选单选
            function checkAll() {
                // 全选按钮

                $(".selectAll").click(function () {
                    // console.log($(this).prop('checked'))
                    $(".selectOne").prop('checked', $(this).prop('checked'));
                    allNum();
                })
                // 单选按钮
                $('.selectOne').click(function () {
                    // console.log("aa")
                    let flag = true;
                    $('.selectOne').each(function (i, val) {
                        console.log(val.checked);
                        if (val.checked === false) {
                            flag = false;
                        }
                    });
                    allNum();
                    $(".selectAll").prop('checked', flag);

                });
            }
            checkAll();
        })
    </script>
</body>

</html>